<!DOCTYPE html>
<html dir="ltr">

<head>
  <meta charset="UTF-8">
  <title>Button Effect - Basic</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
  <link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
  <script src="../../../../../scripts/testing/scripts.js"></script>
  <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
  <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
  <style>
    .my-block {
      position: relative;
      display: block;
      background: blue;
      color: white;
      width: 300px;
      height: 100px;
      margin: 1rem;
    }

    .block {
      position: relative;
      display: block;
      background: #262626;
      color: white;
      width: 300px;
      height: 300px;
      border-radius: 20px;
      margin: 1rem;
    }

  </style>
</head>

<body>
  <ion-app>

    <ion-header>
      <ion-toolbar>
        <ion-title>Button Effect - Basic</ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content class="ion-padding" no-bounce>
      <p>
        <ion-button size="small">Small</ion-button>
      </p>
      <p>
        <ion-button size="large">Large</ion-button>
      </p>
      <p>
        <ion-button size="large" fill="outline">Large</ion-button>
      </p>
      <p>
        <ion-button size="large" fill="clear">Large</ion-button>
      </p>
      <div class="my-block ion-activatable">
        <ion-ripple-effect></ion-ripple-effect>
        This is just a div + effect behind
        <ion-button onclick="buttonClicked()">Nested button</ion-button>
      </div>
      <div class="my-block ion-activatable">
        This is just a div + effect on top
        <ion-button onclick="buttonClicked()">Nested button</ion-button>
        <ion-ripple-effect></ion-ripple-effect>
      </div>

      <div class="my-block ion-activatable">
        This is just a div + effect
        <ion-ripple-effect></ion-ripple-effect>
      </div>

      <a class="my-block ion-activatable">
        This is just a a + effect on top
        <ion-button onclick="buttonClicked()">Nested button</ion-button>
        <ion-ripple-effect></ion-ripple-effect>
      </a>

      <button class="my-block ion-activatable">
        This is just a button + effect on top
        <ion-button onclick="buttonClicked()">Nested button</ion-button>
        <ion-ripple-effect></ion-ripple-effect>
      </button>

      <a class="block ion-activatable">
        <ion-ripple-effect></ion-ripple-effect>
      </a>
    </ion-content>

  </ion-app>
  <script>
    function blockClicked() {
      console.log('block clicked');
      return true;
    }
    function buttonClicked() {
      console.log('button clicked');
    }
  </script>
</body>

</html>
